<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Email Validation Example</title>
</head>
<body>
  <form id="app">
    <input id="code" type="text" name="code" required pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$" title="要求代码">
    <input type="submit" >
  </form>

  <script>
    const schema = [
      {
        "type": "label",
        "props": {
          "for": "email",
          "textContent": "Email:"
        }
      },
      {
        "type": "input",
        "props": {
          "type": "text",
          "id": "email",
          "name": "email",
          "placeholder": "Enter your email",
          "pattern": "[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}",
          "title": "Please enter a valid email address.",
          "required": true
        }
      },
      {
        "type": "button",
        "props": {
          "type": "submit",
          "textContent": "Submit"
        }
      }
    ];

    function createElementFromSchema(schema) {
      if (Array.isArray(schema)) {
        return schema.map(createElementFromSchema);
      }

      const element = document.createElement(schema.type);

      if (schema.props) {
        Object.keys(schema.props).forEach(key => {
          if (key.startsWith('data-') || key === 'for' || key === 'pattern' || key === 'title') {
            element.setAttribute(key, schema.props[key]);
          } else if (key === 'textContent') {
            element.textContent = schema.props[key];
          } else {
            element[key] = schema.props[key];
          }
        });
      }

      return element;
    }

    function renderSchema(schema, container) {
      const elements = createElementFromSchema(schema);
      elements.forEach(element => container.appendChild(element));
    }

    const app = document.getElementById('app');
    // renderSchema(schema, app);
app.addEventListener('submit',()=>{
    console.log(1)
})
    let input = document.getElementById('code')
    input.input = ()=>{
        console.log(1);
    }
    console.log(input)
  </script>
</body>
</html>
